<!DOCTYPE html>
<html lang="en">
<head>
	<!-- The jQuery library is a prerequisite for all jqSuite products -->
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<!-- We support more than 40 localizations -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
	<!-- This is the Javascript file of jqGrid -->
	<script type="text/ecmascript" src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
	<!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<meta charset="utf-8" />
	<title>jqGrid Functionality - Custom Formatters</title>
</head>
<body>
<div style="margin-left:20px">
	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
	$(document).ready(function () {
		$("#jqGrid").jqGrid({
			url: 'json/cellFormattersCustom.json',
			datatype: "json",
			colNames: ['ID', 'Photo File Name', 'Photo', 'Rating'],
			colModel: [
				{
					name: 'ID',
					width: 75
				},
				{
					name: 'FileName',
					width: 150
				},
				{
					name: 'Photo',
					width: 150,
					align: 'center',
					formatter: formatImage
				},
				{
					name: 'Rating',
					width: 50,
					formatter: formatRating
				}
			],
			autowidth: false,
			height: 300,
			rowNum: 150,
			loadonce : true,
			pager: "#jqGridPager"
		});
	});
	// The FormatFunction for CustomFormatter gets three parameters
	// cellValue - the original value of the cell
	// options - as set of options, e.g
	//   options.rowId - the primary key of the row
	//   options.colModel - colModel of the column
	// rowData - array of cell data for the row, so you can access other cells in the row if needed
	function formatImage(cellValue, options, rowObject) {
		var imageHtml = "<img src='../../../network/netty/src/main/resources/static/" + cellValue + "' originalValue='" + cellValue + "' />";
		return imageHtml;
	}
	// The FormatFunction for CustomFormatter gets three parameters
	// cellValue - the original value of the cell
	// options - as set of options, e.g
	//   options.rowId - the primary key of the row
	//   options.colModel - colModel of the column
	// cellObject - the HMTL of the cell (td) holding the actual value
	function unformatImage(cellValue, options, cellObject) {
		return $(cellObject.html()).attr("originalValue");
	}
	function formatRating(cellValue, options, rowObject) {
		var color = (parseInt(cellValue) > 0) ? "green" : "red";
		var cellHtml = "<span style='color:" + color + "' originalValue='" +
				cellValue + "'>" + cellValue + "</span>";

		return cellHtml;
	}
	function unformatRating(cellValue, options, cellObject) {
		return $(cellObject.html()).attr("originalValue");
	}
</script>
</body>
</html>